<template>
	<!-- 发布商品 -->
	<view class="releasegoods_wp">
		<!-- <view class="r_list">
			<view class="r_title">商品类型</view>
			<uni-data-picker v-model="typessindex" class="r_data-picker" :localdata="typespick"
				@change="typePickerChange"></uni-data-picker>
		</view> -->
		<view class="r_list2">
			<view class="r_l2_title">商品名称</view>
			<view class="r_l2_name">
				<input type="text" v-model="info.title" placeholder="输入商品名称" />
			</view>
		</view>
		<view class="r_list">
			<view class="r_title">原价(划线价)</view>
			<input type="text" v-model="info.productprice" placeholder="输入商品原价" />
		</view>
		<view class="r_list">
			<view class="r_title">供货价</view>
			<input type="text" v-model="info.buyprice" placeholder="输入商品供货价" />
		</view>
		<view class="r_list">
			<view class="r_title">商品售价</view>
			<text class="r_text">{{info.buyprice | filPrice('1',supInfo)}}</text>
		</view>
		<!-- <view class="r_list">
			<view class="r_title">运费方式</view>
			<radio-group class="r_checkboxs" @change="dispatchChange">
				<label class="r_c_r_label" v-for="(item, index) in dispatchlist" :key="item.value">
					<radio color="#8405dc" class="r_checkbox" :value="item.value"
						:checked="index == info.dispatchtype" />{{item.name}}
				</label>
			</radio-group>

		</view> -->
		<!-- <view class="r_list" v-if="info.dispatchtype==0">
			<view class="r_title">运费模板</view>
			<picker @change="sendfeechange" :value="sendfeeindex" :range="sendfee">
				<view :class="{'r_picker0':sendfeeindex===0}" class="r_picker">{{sendfee[sendfeeindex]}}</view>
			</picker>
		</view>
		<view class="r_list" v-if="info.dispatchtype==1">
			<view class="r_title">统一运费</view>
			<input type="text" v-model="info.dispatchprice" placeholder="输入固定运费" />
		</view> -->
		<view class="r_list">
			<view class="r_title">库存</view>
			<input type="text" v-model="info.total" placeholder="输入商品数量" />
		</view>
		<view class="r_list r_list1">
			<view class="r_title">用户实付：</view>
			<text v-if="info.buyprice">{{info.buyprice | filPrice('2',supInfo)}}</text>
		</view>
		<view class="r_list r_list1">
			<view class="r_title">实际收入：</view>
			<text v-if="info.buyprice">{{info.buyprice | filPrice('3',supInfo)}}</text>
		</view>
		<!-- <view class="r_list">
			<view class="r_title">重量(g)</view>
			<input type="text" v-model="info.weight" placeholder="输入商品重量" />
		</view> -->
		<view class="r_list2">
			<view class="r_l2_title">商品封面图</view>
			<view class="r_images">
				<image v-if="coverLoading" class="r_loading" src="../../static/business/loading.gif" mode=""></image>
				<view class="r_image_item" v-if="info.thumb!=''" @click="uploadcovuer">
					<image :src="info.thumb"></image>
				</view>
				<view class="r_image_item" v-if="info.thumb==''" @click="uploadcovuer">
					<image src="../../static/shizi.jpg" class="r_addimage"></image>
				</view>
			</view>
		</view>
		<view class="r_list2">
			<view class="r_l2_title">商品相册</view>
			<view class="r_images">
				<view class="r_image_item" v-for="(item,index) in info.thumb_url" :key="item">
					<image :src="item" mode="heightFix"></image>
					<text class="r_image_close" @click="deleteimage(index)">×</text>
				</view>
				<view class="r_image_item" @click="uploadalbum">
					<image v-if="albumLoading" class="r_loading" src="../../static/business/loading.gif" mode="">
					</image>
					<image src="../../static/shizi.jpg" class="r_addimage"></image>
				</view>
			</view>
		</view>
		<view class="r_list_checkboxs">
			<view class="r_title">发货方式</view>

			<radio-group class="r_checkboxs" @change="deliverChange">
				<label class="r_c_r_label" v-for="(item, index) in deliverlist" :key="item.value">
					<radio color="#8405dc" class="r_checkbox" :value="item.value" :checked="index == info.issend" />
					{{item.name}}
				</label>
			</radio-group>
		</view>
		<view class="r_list2">
			<view class="r_l2_title">商品详情</view>
			<view class="r_l2_name">
				<edi-tor ref="deitor"></edi-tor>
			</view>
		</view>
		<view class="r_button" @click="onsumbit">发布</view>

	</view>
</template>

<script>
	import ediTor from '@/components/editor/editor.vue'
	const token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
	export default {
		components: {
			ediTor
		},
		data() {
			return {

				supInfo: {
					saleRate: 1,
					serviceRate: 0
				},

				info: {
					id: '',
					title: '',
					agentprice: '',
					marketprice: '',
					total: '1',
					thumb: '',
					thumb_url: [],
					ccate: '',
					pcate: '',
					issend: '0',
					dispatchid: '0',
					content: '',
					weight: '',
					dispatchtype: '0',
					dispatchprice: '',
					productprice: '',
					buyprice: '',
				},

				typessindex: '',
				typespick: [],

				sendfeeindex: 0,
				dispatchidList: [],
				sendfee: ['请选择模板'],

				coverLoading: false,

				albumLoading: false,

				dispatchlist: [{
						value: '0',
						name: '自选模板'
					},
					{
						value: '1',
						name: '统一运费'
					}
				],

				deliverlist: [{
						value: '0',
						name: '当场自提'
					},
					// {
					// 	value: '1',
					// 	name: '邮寄发货'
					// },
				],
			}
		},
		onLoad(option) {
			this.info.id = option.id ? option.id : '';
			this.getSupRate();
			if (this.info.id) {
				this.getinfo();
			} else {
				this.getinfolist();
			};

		},
		filters: {
			filPrice(data, type, supInfo) {
				let mibi = Math.ceil(data * supInfo.saleRate - data);
				let fuwufei = mibi * supInfo.serviceRate / 100;
				let shoujia = data * 1 + mibi * 1;
				let zong = data * 1 + fuwufei * 1;
				if (type == 1) {
					return shoujia;
				}
				if (type == 2) {
					return data + '元+' + fuwufei + '元服务费=' + zong + '元';
				}
				if (type == 3) {
					return data + '元现金+' + mibi + '个米币';
				}
			}
		},
		methods: {
			getSupRate() {
				this.$axios('goods/supRate', 'POST', 'supplier').then(res => {
					if (res.data.code == 200) {
						this.supInfo = res.data.data;
					}
				})
			},
			onsumbit() {
				this.$refs.deitor.getContents().then(res => {
					this.info.content = res ? res : '';
					var info = JSON.parse(JSON.stringify(this.info));
					info.thumbs = JSON.stringify(info.thumb_url);
					let mibi = Math.ceil(info.buyprice * this.supInfo.saleRate - info.buyprice);
					info.agentprice = info.buyprice * 1 + mibi * 1;
					this.$axios('goods/goodsSave', 'POST', 'supplier', info).then(res => {
						if (res.data.code == 200) {
							this.$api.msg('发布成功！')
							setTimeout(() => {
								uni.redirectTo({
									url: '../business/shopmanagement'
								})
							})
						}
					})
				});
			},
			getinfolist() {
				this.$axios('dispatch/sendfee', 'POST', 'supplier').then(res => {
					if (res.data.code == 200) {
						this.dispatchidList = res.data.data;
						res.data.data.map(item => {
							if (item.id == this.info.dispatchid) this
								.sendfeeindex = i + 1;
							this.sendfee.push(item.dispatchname);
						})
						this.$axios('goods/cate', 'POST', 'supplier').then(resc => {
							if (resc.data.code == 200) {
								resc.data.data.map(item => {
									let obj1 = {
										text: item.name,
										value: item.id,
										children: []
									}
									obj1.children = item.children.map(item2 => ({
										text: item2.name,
										value: item2.id
									}))
									this.typespick.push(obj1);
								})
							}
						})
					}
				})
			},
			getinfo() {
				uni.showLoading({
					title: '加载中'
				});
				this.$axios('goods/cate', 'POST', 'supplier').then(resc => {
					if (resc.data.code == 200) {
						resc.data.data.map(item => {
							let obj1 = {
								text: item.name,
								value: item.id,
								children: []
							}
							obj1.children = item.children.map(item2 => ({
								text: item2.name,
								value: item2.id
							}))
							this.typespick.push(obj1);
						})
						this.$axios('goods/goodsInfo', 'POST', 'supplier', {
							id: this.info.id
						}).then(res => {
							if (res.data.code == 200) {
								this.info = res.data.data;
								this.typessindex = this.info.ccate;
								this.$nextTick(function() {
									this.$refs.deitor.setContents(this.info.content);
								})
								this.$axios('dispatch/sendfee', 'POST', 'supplier').then(resd => {
									uni.hideLoading();
									if (resd.data.code == 200) {
										this.dispatchidList = resd.data.data;
										resd.data.data.map((item, i) => {
											if (item.id == this.info.dispatchid) this
												.sendfeeindex = i + 1;
											this.sendfee.push(item.dispatchname)
										})
									}
								})
							}
						})
					}
				})
			},
			uploadalbum() {
				let that = this;
				uni.chooseImage({
					count: 9,
					success(res) {
						res.tempFilePaths.map((item, i) => {
							that.uploadimage(item);
						})

					}
				})
			},
			uploadimage(img_src) {
				let that = this;
				that.albumLoading = true;
				uni.uploadFile({
					url: that.$url.state.url.upload,
					filePath: img_src,
					name: 'a',
					header: {
						token: token
					},
					formData: {
						'file': 'a'
					},
					success: upres => {
						var data = JSON.parse(upres.data);
						if (data.code == 200) {
							that.info.thumb_url.push(data.data.url);
						} else {
							that.$api.msg('上传失败请重试！')
						}


					},
					fail() {
						that.$api.msg('上传失败请重试！')
					},
					complete() {
						that.albumLoading = false;
					}
				})
			},
			uploadcovuer() {
				let that = this;
				uni.chooseImage({
					count: 1,
					success(res) {
						that.coverLoading = true;
						uni.uploadFile({
							url: that.$url.state.url.upload,
							filePath: res.tempFilePaths[0],
							name: 'a',
							header: {
								token: token
							},
							formData: {
								'file': 'a'
							},
							success: upres => {
								var data = JSON.parse(upres.data);
								if (data.code == 200) {
									that.info.thumb = data.data.url;
								} else {
									that.$api.msg('上传失败请重试！')
								}


							},
							fail() {
								that.$api.msg('上传失败请重试！')
							},
							complete() {
								that.coverLoading = false;
							}
						})
					}
				})
			},
			onEditorReady() {

			},
			dispatchChange(e) {
				this.info.dispatchtype = e.detail.value;
			},
			deliverChange(e) {
				this.info.issend = e.detail.value;
			},
			deleteimage(i) {
				this.info.thumb_url.splice(i, 1)
			},
			sendfeechange(e) {
				this.sendfeeindex = e.target.value;
				this.info.dispatchid = this.sendfeeindex != 0 ? this.dispatchidList[this.sendfeeindex - 1].id : '';
			},
			typePickerChange(e) {
				const value = e.detail.value;
				this.info.ccate = value[0].value;
				this.info.pcate = value[1].value;
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 130upx;
	}

	.releasegoods_wp {
		color: $font-color-dark;
		padding: 0 20upx 130upx;
	}

	.r_list {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 90upx;
	}

	.r_list1 {
		justify-content: flex-start;
	}

	.r_data-picker {
		min-width: 250upx;
	}

	.r_list input,
	.r_text {
		text-align: right;
		font-size: 26upx;
	}

	.r_picker,
	.r_l2_name input,
	.r_list input {
		color: $font-color-base;
	}

	.r_picker0 {
		color: $font-color-light;
	}

	.r_list2 {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		padding: 20upx 0;
		position: relative;
	}

	.r_l2_name {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 20upx;
	}

	.r_l2_name input {
		font-size: 26upx;
		width: 100%;
	}

	.r_l2_name .yticon {
		color: $font-color-dark;
		font-size: 50upx;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.r_search {
		background: #fff;
		box-shadow: 0 0 3px 3px #D6D6D6;
		width: 100%;
		padding: 0 20upx;
		position: absolute;
		top: 90upx;
		z-index: 300;
	}

	.r_s_title {
		line-height: 90upx;
		text-align: center;
		font-size: $font-base;
	}

	.r_s_close {
		color: $font-color-light;
		font-size: 60upx;
		position: absolute;
		right: 10upx;
		top: 0;
	}

	.r_search_input {
		border: 1px hsl(0, 0%, 87%) solid;
		border-radius: 10upx;
		padding: 0 20upx;
		height: 70upx;
	}

	.scroll-Y {
		line-height: 70upx;
		height: 500upx;
		padding: 20upx 0 40upx;
	}

	.scroll-item {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
	}

	.r_label {
		margin-left: 40upx;
	}

	.r_radio {
		transform: scale(0.8);
	}

	.r_images {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
	}

	.r_image_item {
		border: 1px hsl(0, 0%, 87%) solid;
		border-radius: 10upx;
		height: 230upx;
		width: 230upx;
		text-align: center;
		overflow: hidden;
		margin-right: 6upx;
		position: relative;
		margin-top: 20upx;
	}

	.r_image_item image {
		width: 100%;
		height: 100%;
	}

	.r_image_close {
		background-color: $base-color;
		border-radius: 50%;
		color: #fff;
		display: inline-block;
		font-size: 40upx;
		position: absolute;
		right: 0;
		top: 0;
		height: 40upx;
		line-height: 40upx;
		width: 40upx;
	}

	.r_addimage {
		border-radius: 10upx;
		width: 100%;
	}

	.r_loading,
	.r_image_item .r_loading {
		position: absolute;
		height: 60upx;
		width: 60upx;
		left: 88upx;
		z-index: 100;
	}

	.r_image_item .r_loading {
		top: 88upx;
	}

	.r_list_checkboxs {
		border-bottom: 1px hsl(0, 0%, 87%) solid;
		display: flex;
		padding: 20upx 0;
	}

	.r_checkboxs {
		flex: 1;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.r_c_r_label {
		margin-left: 20upx;
	}

	.r_checkbox {
		transform: scale(0.7);
	}

	.r_l2_textarea {
		color: $font-color-base;
		padding: 0 20upx 20upx;
		font-size: 24upx;
		line-height: 40upx;
		width: 100%;
	}

	.r_button {
		background: linear-gradient(to right, #ff7101, #f03201);
		border-radius: 40upx;
		color: #fff;
		line-height: 70upx;
		height: 70upx;
		letter-spacing: 2px;
		position: fixed;
		bottom: 30upx;
		text-align: center;
		width: 90%;
		z-index: 20;
	}
</style>
